<template>
  <div class="mdBox">
    <MdPreview :editorId="id" :modelValue="content" />
    <MdCatalog :editorId="id" :scrollElement="scrollElement" />
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { MdPreview, MdCatalog } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
const id = 'preview-only'
const scrollElement = document.documentElement
const props = defineProps({
  content: String
})
const content = ref(props.content)
watch(ref(props.content), (newVal) => {
  content.value = newVal
})
</script>
<style lang="scss" scoped></style>
